<template>
	<view class="card">
		<view class="header" v-if="cardHType !== 'none'">
			<view class="title" :class="tPrefix? 'tPrefix' : ''" v-if="cardHType === 'title'">{{title}}</view>
			<template v-else-if="cardHType === 'info'">
				<image class="cover" :src="info.url || '/static/images/JMS-touxiang.png'" alt=""
					@error="handleImgCoverError" />
				<view class="info">
					<p class="name">{{info.name}}</p>
					<p class="msg">
						<slot name="info-msg" :data="info"></slot>
					</p>
				</view>
				<view class="rg-btns">
					<slot name="btns" :data="info"></slot>
				</view>
			</template>
			<template v-else-if="cardHType === 'constom'">
				<slot name="head"></slot>
			</template>
		</view>
		<view class="content" v-if="cardFType !== 'none'">
			<template v-if="cardFType === 'constom'">
				<slot name="footer"></slot>
			</template>
			<template v-else>
				<image class="arrow-left" v-if="isChange" src="/static/images/arrow-left-bold.png" alt=""
					@click="handleArrowClick('left')" />
				<view class="wrapper-list">
					<view class="content-list"
						:style="{transform: `translateX(${translateX}rpx)`,flexWrap: flexWrap? 'wrap': ''}">
						<view class="content-item" :style="{marginBottom: flexWrap? '18rpx' : '4rpx'}"
							v-for="item in list" :key="item.name" @click="handleCtClick(item)">
							<view class="ctItemgBg" v-if="ctItemgBgUrl"
								:style="{backgroundImage: `url(${ctItemgBgUrl})`}" mode="">
								<image class="img" :src="item.url" alt="" />
							</view>
							<image v-else class="good-img" :src="item.url" alt="" />
							<view class="name">{{item.name}}</view>
						</view>
					</view>
				</view>
				<image class="arrow-right" v-if="isChange" src="/static/images/arrow-right-bold.png" alt=""
					@click="handleArrowClick('right')" />
			</template>
		</view>
	</view>
</template>

<script>
	/**
	 * dropdown 自定义卡片
	 * @description 该组件一般用于各种卡片组件 多重插槽和模板形式 自由且搞笑
	 * @property {Object} data 
	 * info?: 为传入的详情数据 当Htype为info时传入 可选类型
	 * isChange?: 是否内容卡片有切换功能 类似于轮播图的功能 当cardType为info时并且需要该功能时传入 可选类型 默认为false
	 * tPrefix?: 标题是否需要竖线装饰 可选类型 默认为 false
	 * flexWrap?: 卡片内容区域的弹性盒子是否需要换行 可选类型 默认为 false
	 * list?: 卡片内容列表数据 可选类型 默认为 []
	 * ItemgBgUrl?: 卡片列表项的背景 可选类型 特殊需求时传入 一般不用传
	 * 
	 * @property {Object} cardType
	 * Htype 为头部的卡片类型 有 title模板类型 info模板类型  constom自定义插槽 默认为title
	 * Ftype 为内容+底部的卡片类型 info模板类型 constom自定义插槽 默认为info
	 * @example <Card></Card>
	 */

	export default {
		name: 'costom-card',
		data() {
			return {
				// 卡片的类型： title头部只有标题 / info 默认的详情模板的  / constom 自定义插槽的
				cardHType: 'title',
				cardFType: 'info',
				isChange: false,
				title: '',
				list: [],
				info: {},
				page: 1,
				pageSize: 4,
				total: 0,
				exhibitionList: [],
				translateX: 0,
				ctItemgBgUrl: null,
				tPrefix: false,
				flexWrap: false
			}
		},
		props: {
			data: {
				type: Object,
				default: {}
			},
			cardType: {
				type: Object,
				default: {
					Htype: 'title',
					Ftype: 'info'
				}
			},
		},
		created() {
			const {
				data,
				cardType
			} = this.$props
			// 头部和底部组件类型
			if (cardType) {
				this.cardHType = cardType.Htype ?? 'title'
				this.cardFType = cardType.Ftype ?? 'info'
			}
			// 一般Htype为info时需要传入
			if (data.info) {
				this.info = data.info
			}
			// 标题文本
			this.title = data.title
			// 切换功能 arrow-left arrow-right 切换功能
			this.isChange = data.isChange
			// 标题前缀
			this.tPrefix = data.tPrefix
			// flex布局换行
			this.flexWrap = data.wrap
			// 内容的列表数据
			if (data.list) {
				this.list = data.list
				this.total = data.list.length
			}
			// 列表项的背景
			if (data.ItemgBgUrl) {
				this.ctItemgBgUrl = data.ItemgBgUrl
			}
			// 展示列表
			if (data.isChange) {
				this.exhibitionList = this.list.slice((this.page - 1) * this.pageSize, this.page * this.pageSize)
			} else {
				this.exhibitionList = this.list
			}
		},
		methods: {
			handleImgCoverError(e) { // 图片加载错误时显示
				info.url = '/static/images/arrow-left-bold.png'
				console.log("::::::error:::::", e);
			},
			// 
			handleArrowClick(type) { // 点击左右箭头
				if (type === 'left') {
					this.page--
					if (this.page < 1) {
						this.page = 1
						return
					}
				} else {
					this.page++
					if (this.page > Math.ceil(this.total / this.pageSize)) {
						this.page = Math.ceil(this.total / this.pageSize)
						return
					}
				}
				// 根据页码截取数据
				// this.exhibitionList = this.list.slice((this.page - 1) * this.pageSize, this.page * this.pageSize)
				this.translateX = (-158 * 4) * (this.page - 1)
			},
			handleCtClick(item) { // 点击内容项
				this.$emit('onCtTapClick', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		width: 100%;
		padding: 18rpx 30rpx;
		background-color: #fff;
		border-radius: 32rpx;
		margin-bottom: 20rpx;

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 8px;

			.title {
				display: flex;
				align-items: center;
				font-size: 29rpx;
				color: #333;
			}

			.tPrefix {
				&::before {
					content: '';
					display: inline-block;
					width: 8rpx;
					height: 36rpx;
					background-color: #D0241C;
					border-radius: 3rpx;
					margin-right: 9rpx;
				}
			}

			.cover {
				width: 110rpx;
				height: 110rpx;
			}

			.info {
				flex: 1;
				margin-left: 20rpx;

				.name {}

				.msg {
					margin-top: 10rpx;
					font-size: 26rpx;
				}
			}

			.rg-btns {
				display: flex;
				align-items: center;
			}
		}

		.content {
			width: 100%;
			position: relative;
			box-sizing: border-box;

			.arrow-left,
			.arrow-right {
				position: absolute;
				top: 50%;
				width: 35rpx;
				height: 35rpx;
				transform: translateY(-50%);
			}

			.arrow-left {
				left: -24rpx;
			}

			.arrow-right {
				right: -24rpx;
			}

			.wrapper-list {
				width: 100%;
				display: flex;
				overflow-x: hidden;
				transition: all 0.3s;

				.content-list {
					width: 100%;
					display: flex;
					padding: 0 -10rpx;
					transition: all 0.3s;

					.content-item {
						width: 25%;
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 0 10rpx;
						flex-shrink: 0;
						box-sizing: border-box;

						.good-img {
							width: 100%;
							height: 160rpx;
						}

						.ctItemgBg {
							width: 100rpx;
							height: 100rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 50%;
							background-size: 100%;
							background-repeat: no-repeat;

							.img {
								width: 64%;
								height: 64%;
							}
						}

						.name {
							width: 100%;
							margin-top: 14rpx;
							font-size: 26rpx;
							text-align: center;
							overflow: hidden;
							/* 确保文本超出容器时会被裁剪 */
							white-space: nowrap;
							/* 确保文本在一行内显示 */
							text-overflow: ellipsis;
							/* 使用省略号表示文本溢出 */
						}
					}
				}
			}
		}
	}
</style>